<template>
  <div style="width:100%;height:100%">
    <v-chart :options="option" :initOptions="initOptions" autoresize />
  </div>
</template>
<script>
function transpose (arr) {
  var newArray = arr[0].map((col, i) => {
        return arr.map((row) => {
        return row[i]
        })
        })
  return newArray
}
export default {
  name: 'chart',
  props: ['index'],
  mounted () {
  },
  data () {
    return {
      initOptions: { renderer: 'canvas' }
    }
  },
  methods: {
  },
  computed: {
    insideSlideArray () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent
    },
    insideArrayIndex () {
      return this.insideSlideArray.indexOf(this.insideSlideArray.filter((currentValue) => {
        return currentValue.i === this.index
      })[0])
    },
    getDetail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.insideArrayIndex].itemContent.detail
    },
    getOptions () {
      var options = []
      for (let i = 0, nc = this.getDetail.nc - 1; i < nc; i++) {
        var arr = this.getDetail.sheetData.slice(1).map((item, index) => {
            return [item[0], item[i + 1], this.getDetail.color.linear[(index % 12)], this.getDetail.color.linear[(index % 12)].colorStops[0].color]
        })
        arr.sort((a, b) => { return b[1] - a[1] })
        arr = arr.slice(0)
        // 转置
        var newArray = transpose(arr)
        options.push({
          series: [
          {
            ...this.getDetail.simpleBar,
            showBackground: false,
            barGap: '-100%',
            label: {
              ...this.getDetail.label
            },
            emphasis: this.getDetail.emphasis,
            animationDuration: this.getDetail.dtRankingBar.animationDuration,
            animationDurationUpdate: this.getDetail.dtRankingBar.animationDurationUpdate,
            animationEasing: this.getDetail.dtRankingBar.easing,
            animationEasingUpdate: this.getDetail.dtRankingBar.easing,
            type: 'bar',
            data: arr.map((item) => {
              return { name: item[0], value: item[1], itemStyle: { color: item[2] }, label: { color: item[3] } }
            })
          },
          {
            ...this.getDetail.simpleBar,
            showBackground: false,
            barGap: '-100%',
            label: {
              ...this.getDetail.label,
              formatter: '{b}',
              position: 'left'
            },
            animationDuration: this.getDetail.dtRankingBar.animationDuration,
            animationDurationUpdate: this.getDetail.dtRankingBar.animationDurationUpdate,
            animationEasing: this.getDetail.dtRankingBar.easing,
            animationEasingUpdate: this.getDetail.dtRankingBar.easing,
            type: 'bar',
            data: arr.map((item, index) => {
              return { name: item[0], value: item[1], itemStyle: { color: 'transparent' }, label: { color: item[3] } }
            })
          }],
          yAxis: [{
            data: newArray[0],
            type: 'category',
            max: this.getDetail.dtRankingBar.top - 1
          }],
          title: {
            ...this.getDetail.title,
            text: this.getDetail.sheetData[0][i + 1] + this.getDetail.title.text
          }
        })
      }
      return options
    },
    option () {
      return {
        baseOption: {
          animation: this.getDetail.animation,
          timeline: {
            data: this.getDetail.sheetData[0].slice(1),
            ...this.getDetail.timeline
          },
          itemStyle: {
            ...this.getDetail.itemStyle
          },
          title: this.getDetail.title,
          dataset: {
            source: this.getDetail.sheetData,
            sourceHeader: true
          },
          grid: this.getDetail.grid,
          xAxis: this.getDetail.xAxis,
          yAxis: {
            ...this.getDetail.yAxis,
            axisLabel: {
              show: false
            }
          },
          tooltip: {},
          backgroundColor: this.getDetail.backgroundColor[this.getDetail.backgroundColor.option]
        },
        options: this.getOptions
      }
    }
  }
}
</script>
<style scoped>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
